<template>
    <el-container>
        <el-header>
            <h2>数据展示</h2>
        </el-header>
        <el-main>
            <el-row>
                <div style="width: 700; height: 600; color:red; float: left;">
                    <el-card style="width: 700px; height: 250px; ">
                        <div style="text-align: left; width: 350px;  ">
                            <h3>温度一:{{ state1 }}℃</h3>
                            <h3>温度二:{{ state2 }}℃</h3>
                            <h3>湿度一:{{ state3 }}</h3>
                            <h3>湿度二:{{ state8 }}</h3>
                        </div>

                    </el-card>

                    <el-card style="width: 700px; height: 250px;">
                        <div style="text-align: left; width: 350px; float: right; ">
                            <h3>功率1:{{ power1 }}</h3>
                            <h3>功率2:{{ power2 }}</h3>
                            <h3>功率3:{{ power3 }}</h3>
                            
                        </div>
                        <div style="text-align: left; width: 350px;  ">
                            <h3>温度阈值1:{{ limit1 }}℃</h3>
                            <h3>温度阈值2:{{ limit2 }}℃</h3>
                            <h3>光照阈值2:{{ limit3 }}</h3>
                        </div>
                    </el-card>
                </div>



                <div style="width: 700; height: 600; color:red; float: left; ">
                    <el-card style="width: 700px; height: 150px;">
                        <h3>当前时间:{{ currenttime }}℃</h3>
                    </el-card>
                    <el-card style="width: 700px; height: 350px;">
                        <div style="text-align: left; width: 350px;  ">
                            <h3>光照强度:{{ state5 }}</h3>
                            <h3>烟雾浓度:{{ state6 }}</h3>
                            <h3>电压强度:{{ state7 }}</h3>
                        </div>
                    </el-card>
                </div>



            </el-row>
            <el-row>
                <div style="width: 300; height: 600; color:red; float: left; ">
                    <el-card style="width: 700px; height: 600px; ">
                        <div style="text-align: left; width: 350px;  float: right;">
                            
                        </div>
                        <div style="text-align: left; width: 300px; height: 600px; ">
                            <h3>设置温度阈值1</h3>
                            <el-input v-model="inputstate1" placeholder="温度阈值1" style="width: 90px;  "></el-input>
                            <el-button type="primary" @click="setstate1">确定</el-button>
                            <h3>设置温度阈值2</h3>
                            <el-input v-model="inputstate2" placeholder="温度阈值2" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setstate2">确定</el-button>
                            <h3>设置功率1</h3>
                            <el-input v-model="inputpower1" placeholder="发光功率1" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower1">确定</el-button>
                            <h3>设置功率2</h3>
                            <el-input v-model="inputpower2" placeholder="发光功率2" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower2">确定</el-button>
                            <h3>设置功率3</h3>
                            <el-input v-model="inputpower3" placeholder="发光功率3" style="width: 90px; "></el-input>
                            <el-button type="primary" @click="setpower3">确定</el-button>
                        </div>
                    </el-card>
                </div>
                <div style="width: 300; height: 600;  float: left; ">
                    <el-card style="width: 700px; height: 600px;">

                    </el-card>
                </div>

            </el-row>
        </el-main>
    </el-container>


</template>


<script>
const axios = require('axios');
import { websocket } from '@/utils/websocket';
//相当于导入和逻辑处理一起解决
var sendMeg = "";//处理发送给硬件的信息
var Meg = "";
var cardid = ""; // eslint-disable-line no-unused-vars

export default {
    // el: '#control',
    data() {
        return {
            state1:"",
            state2:"",
            state3:"",
            state4:"",
            state5:"",
            state6:"",
            state7:"",
            state8:"",
            currenttime:"",
            limit1:"",
            limit2:"",
            limit3:"",
           
        }
    },
    computed: {
    },
    watch: {//监听错误次数变化


    },
    created() {
        
        this.initWecSocket();
        this.webSocketOnmessage();
    },
    methods: {
        reconnect: function () {
            sendMeg = "HWh1" + this.Tmax + "l1" + this.Tmin + "ls" + this.LSmax + "Z"
            axios.get("http://localhost:8888/sendMessageTo/" + sendMeg);
        },
        initWecSocket: function () {
            // this.webSocket = new WebSocket("ws://localhost:8888//ws/WebSocket");
            this.webSocket = websocket;
            this.webSocket.onmessage = this.webSocketOnmessage;
            // this.webSocket.onerror = this.webSocketOnerror();
            //初始化完毕之后echarts显示数据信息
        },
        webSocketOnmessage: function (event) { //对接受的信息进行逻辑判断
            //    Meg=JSON.parse(event.data)
            Meg = event.data;
            console.log("收到硬件信息" + Meg);
            //根据收到的信息实时显示到页面
            if (event.data.substring(0, 2) == "T#") {
                this.Tstate1 = event.data.substring(2,); //水温
            }
            if (event.data.substring(0, 2) == "H#") { // 水质
                this.Tstate2 = event.data.substring(2,);
            }
            if (event.data.substring(0, 3) == "JH1") {  //计算后的水质
                this.JH1state = event.data.substring(3,);
                this.sysz = 110 * ((3.3 - this.JH1state) / this.JH1state)
            }
            if (event.data.substring(0, 2) == "sw") {  //计算后的水质
                this.sw = event.data.substring(2,);

            }
            if (event.data.substring(0, 3) == "JH2") {  //计算后的水质
                this.JH2state = event.data.substring(3,);
                this.yssz = 110 * ((3.3 - this.JH2state) / this.JH2state)
            }
            if (event.data.substring(0, 4) == "Time") {  //计算后的水质
                this.Timestate = event.data.substring(4, 6) + ":" + event.data.substring(6, 8) + ":" + event.data.substring(8, 10);
            }
            if (event.data.substring(0, 2) == "T1") {
                this.Tmax = event.data.substring(2,);
            }
            if (event.data.substring(0, 2) == "T2") {
                this.Tmin = event.data.substring(2,);
            }
            if (event.data.substring(0, 3) == "LS1") {
                this.LSmax = event.data.substring(3,);
            }
            if (event.data.substring(0, 6) == "HWauto") {
                this.ysjstate = event.data.substring(6,);
                this.ysjstate = "复位";
                sendMeg = new Date().toLocaleTimeString();
                axios.get("http://localhost:8888/sendMessageTo/" + sendMeg)
            }
            if (event.data.substring(0, 6) == "HWledr100Z") {
                this.fan1 = true;
            }
            if (event.data.substring(0, 6) == "HWledr000Z") {
                this.fan1 = false;
            }
            if (event.data.substring(0, 3) == "JH#") {
                this.JHstate = event.data.substring(3,);
                if (this.sw < this.Tmin) {
                    axios.get("http://localhost:8888/sendMessageTo/HWdian001");
                }
                if (this.sw > this.LSmax) {
                    axios.get("http://localhost:8888/sendMessageTo/HWdian002");
                }
                if (this.sw < this.Tmin && this.sw > this.LSmax) {
                    axios.get("http://localhost:8888/sendMessageTo/HWwarn1Z");
                }



            }

            if (event.data === "Reconnect") {
                this.reconnect();
            }
        },

    }

}
</script>
